<template>
    <div>
        <h1>介绍</h1>
        <ul>
            <li>Drop-UI 是一款基于  <em>Vue 3</em>  和 <em>TypeScript</em>  的 UI 组件库。</li>
            <li>这款组件库是本人作为练手vue3项目而编写，全程亲自编写，这个官网当然也是啦。</li>
            <li>当然，通过这一个项目，对于TypeScript我也有了一个更好的理解</li>
        </ul>
    </div>
    <div>
        <h2>建议</h2>
        <ul>
            <li>组件并不完善，不建议你将此 UI 组件库用于生产环境。</li>
        </ul>
    </div>
    <div>
        <h2>更多</h2>
        <ul>
            <li>源代码放在了 <a href="https://gitee.com/zhangdeshou/drop-ui">Gitee</a>  ，历史提交信息非常规范，可以按照 <a href="https://gitee.com/zhangdeshou/drop-ui/commits/master">commit</a> 的顺序进行查看。</li>
            <li>具体运行方法见 <a href="https://gitee.com/zhangdeshou/drop-ui/blob/master/README.md">README.md</a> </li>
        </ul>
<!--        <p>上一步：</p>-->
        <p>下一节：<router-link to="/doc/install">安装</router-link></p>
    </div>


</template>

<script>
    export default {
        name: "Introduce"
    }
</script>

<style lang="scss" scoped>
    div{
        margin-bottom: 40px;
        & > :first-child {
            margin-bottom: 20px;
            padding-left: 0px;
            position: relative;
            z-index: -1;
        }
        & > *{
            margin-left: 20px;
        }
        em{
            font-style: normal;
            color: #f28f98;
            font-weight: bold;
        }
        a{
            color: #50a0ff;
        }
        p{
            margin-top: 30px;
            float: right;
        }
    }
    ul{
        padding: 0 40px;
    }
    li{
        /*list-style-type:circle;*/
        padding: 10px 0;
    }
</style>
